import React, { useState, useEffect, forwardRef, useImperativeHandle } from "react"
import { Modal, Spin, Button, Radio, Input, Space, Checkbox, Tag, Icon, message, Popover, ImgDefault, Slider, Upload, InputNumber } from "@bytedance/mona-ui"
import './sku.scss'
import { store, useAppDispatch, useAppSelector } from "~store"
import {
    setSkuTitleList
} from "~store/controller/jinritemaiCopyGoods"
import { getObjectURL } from "./copyDataFomate"
import "./index.scss"
import AiOpenImageComp from "./AIImageComp"

const { AddIcon, FinishIcon } = Icon
function getMoveItemInfo(getitrem: number, bi) {
    let mobeInfo = {}
    switch (getitrem) {
        case 1:
            mobeInfo = {
                left: 5,
                top: 5,
                offseX: 5,
                offsetY: 5,
                width: 15,
                height: Math.round(bi * 15)
            }
            break
        case 2:
            mobeInfo = {
                left: 0,
                top: 0,
                offseX: 0,
                offsetY: 0,
                width: 100,
                height: 100
            }
            break
        default:
            break
    }
    return mobeInfo
}
let addTimeData
const MoveImageBpx = (props: any) => {
    const {
        imageData,
        picImages,
        alldata,
        setPicWatermark,
        length,
        setMoterIndex,
        itemingdex,
        setimageData
    } = props

    if (!imageData) return null
    // const dispatch = useAppDispatch()
    // const zhutuAddImageList = useAppSelector(state => state.jinritemaiCopyGoods.zhutuAddImageList)
    const [imageState, setImageState] = useState(imageData)
    // console.log('初始化111')
    // // const skuTitleList = useAppSelector((state) => state.jinritemaiCopyGoods.skuTitleList)
    // console.log('初始化222', alldata)
    // let setitem = false
    useEffect(() => {
        if (imageState !== imageData) {
            setImageState(imageData)
        }
    }, [imageData])

    useEffect(() => {
        // if(setitem) return
        if (imageState !== imageData) {
            if (addTimeData) {
                clearTimeout(addTimeData)
                addTimeData = null
            }
            addTimeData = setTimeout(() => {
                // console.log('setData', imageState)
                setimageData({ ...imageState })

                // const conterData = JSON.parse(JSON.stringify(alldata))
                // conterData[setMoterIndex].list[0].values[itemingdex].picImga = imageState
                // setitem = true
                // dispatch(setSkuTitleList(JSON.parse(JSON.stringify(conterData))))
                // setTimeout(() => {
                //     setitem = false
                // }, 300)
            }, 150)
            return
        }
    }, [imageState])
    const SetImgContent = () => {

        let tuoconter: any = null

        return (<div
            style={{
                width: 200
            }}>
            <span>{picImages.config.selectType === 1 ? '图标' : '边框'}大小：</span>

            <Slider
                defaultValue={imageState.watermark.width}
                max={100}
                min={0}
                onChange={(e) => {
                    if (tuoconter) {
                        clearTimeout(tuoconter)
                        tuoconter = null
                    }
                    tuoconter = setTimeout(() => {
                        imageState.watermark.width = e
                        imageState.watermark.height = Math.round(imageState.watermark.bi * e)
                        setImageState({ ...imageState })
                    }, 500)
                }}
            />
            <div className="boter">
                <Upload
                    btnType="link"
                    btnText={imageState.watermark.url ? `更换${picImages.config.selectType === 1 ? '图标' : '图片'}` : `添加${picImages.config.selectType === 1 ? '图标' : '图片'}`}
                    btnIcon={<AddIcon />}
                    maxCount={1}
                    showUploadList={false}
                    beforeUpload={(file) => {
                        const fileType = /\image\/\/*/
                        if (fileType.test(file.type)) {
                            const imageUrl: any = getObjectURL(file)
                            var img = new Image()
                            img.src = imageUrl
                            img.addEventListener("load", () => {
                                const iw = img.width
                                const ih = img.height
                                const bi = ih / iw
                                imageState.watermark.url = imageUrl
                                imageState.watermark.bi = bi
                                imageState.watermark.height = picImages.config.selectType === 1 ? Math.round(
                                    bi * imageState.watermark.width
                                ) : 100
                                setImageState({ ...imageState })
                            })
                            return
                        }
                        message.error("仅支持图片")
                    }}
                />
                {imageState.watermark.url && (
                    <>
                        <Button
                            type="link"
                            style={{ marginLeft: 8 }}
                            onClick={() => {
                                const typeConter = getMoveItemInfo(picImages.config.selectType, imageState.watermark.bi)
                                const touWers = Object.assign(imageState.watermark, typeConter)
                                imageState.watermark = touWers
                                setImageState({ ...imageState })
                            }}>
                            恢复默认
                        </Button>
                        <Button
                            type="link"
                            style={{ marginLeft: 8, color: "red" }}
                            onClick={() => {
                                const typeConter = getMoveItemInfo(picImages.config.selectType, imageState.watermark.bi)
                                const touWers = Object.assign(imageState.watermark, typeConter)
                                imageState.watermark = touWers
                                imageState.watermark.url = ''
                                setImageState({ ...imageState })
                            }}>
                            删除{picImages.config.selectType === 1 ? '图标' : '图片'}
                        </Button>
                    </>
                )}
            </div>
            {/* <div className="sortDom">
                排序：
                <InputNumber
                    showCounter
                    max={length}
                    defaultValue={imageState.index + 1}
                    min={1}
                    onChange={(e: any) => {
                        imageState.index = e - 1
                        setPicWatermark(imageState)
                    }}
                />
            </div> */}
        </div>)
    }
    return (<>
        <Popover
            placement="top"
            mouseEnterDelay={0.5}
            content={
                <SetImgContent />
            }
        >
            <div className="moverbox" style={{
                margin: 0
            }}>
                <div
                    className="seterimage"
                    style={{
                        width: 100,
                        height: 100
                    }}
                    onClick={(e) => {
                        e.stopPropagation()
                    }}
                    onMouseMove={(e: any) => {
                        if (imageState?.watermark.moveStatus) {
                            const distanceX = e.pageX - imageState.watermark.pageX
                            const distanceY = e.pageY - imageState.watermark.pageY
                            imageState.watermark.left = Math.round(imageState.watermark.offseX + distanceX)
                            imageState.watermark.top = Math.round(imageState.watermark.offseY + distanceY)
                            setImageState({ ...imageState })
                        }
                    }}
                >
                    {imageState.url ? <ImgDefault
                        className="couyimage"
                        imgSrc={(() => {
                            const getUouter = JSON.parse(JSON.stringify(imageState))
                            const imgae = getUouter.url.replace('obj/', '')
                            return imgae + '~110x110_q75.image'
                        })()}
                        mask={false} /> : <div className="couyimage" style={{
                            height: '100%',
                            display: 'flex',
                            alignItems: 'center',
                            fontSize: 12,
                            textAlign: 'center',
                            justifyContent: 'center'
                        }}>
                        可以添加sku图片
                    </div>}
                    {imageState.watermark?.url && (
                        <img
                            src={imageState.watermark.url}
                            alt="water"
                            draggable="false"
                            style={{
                                width: imageState.watermark.width + "px",
                                height: imageState.watermark.height + "px",
                                top: imageState.watermark.top + "px",
                                left: imageState.watermark.left + "px"
                            }}
                            onMouseDown={(e: any) => {
                                imageState.watermark.moveStatus = false
                                imageState.watermark.setImageStatus = false
                                imageState.watermark.moveStatus = true
                                imageState.watermark.pageX = e.pageX
                                imageState.watermark.pageY = e.pageY
                                imageState.watermark.offseX = e.target.offsetLeft
                                imageState.watermark.offseY = e.target.offsetTop
                                imageState.watermark.clickTime = new Date().getTime()
                                setImageState({ ...imageState })
                            }}
                            onMouseUp={(e: any) => {
                                imageState.watermark.moveStatus = false
                                const upTime = new Date().getTime()
                                if (upTime - imageState.watermark.clickTime < 100) {
                                    imageState.watermark.setImageStatus = !imageState.watermark.setImageStatus
                                }
                                setImageState({ ...imageState })
                            }}
                            className="wterioconbos"
                        />
                    )}
                </div>
            </div>
        </Popover>
    </>)
}


const SkuTitleInfoData = (props: any, ref) => {
    const { goodsDetellData, copyGoodConfig } = props
    if (!goodsDetellData) return (<></>)
    const { copynum } = copyGoodConfig
    const dispatch = useAppDispatch()

    function addSkuData() {
        return {
            list: goodsDetellData.specs,
            config: {
                direction: 'left',
                addTep: '',
                isChecked: false,
                indeterminate: false
            }
        }
    }
    // 商品规格附加信息
    function getDisplaySpecData() {
        let addFunData: any = []
        for (let i = 0; i < copynum; i++) {
            goodsDetellData.specs
                .forEach((res, index) => {
                    res.config = { selectType: 2 }
                    res.values.forEach((item, indeter) => {
                        item.addTep = ''
                        item.direction = 'left'
                        item.isChecked = false
                        if (index === 0) {
                            item.picImga = {
                                url: goodsDetellData.spec_pics[indeter] && goodsDetellData.spec_pics[indeter].pic && `https://p3-aio.ecombdimg.com/obj/${goodsDetellData.spec_pics[indeter].pic}`,
                                watermark: {
                                    ...getMoveItemInfo(res.config.selectType, 0),
                                    bi: 0,
                                    pageX: 0,
                                    pageY: 0,
                                    url: null,
                                    moveStatus: false,
                                    clickTime: 0,
                                    setImageStatus: false,
                                    mergeurl: null
                                },
                                moveImageStatus: false,
                                translateX: index * 120,
                                left: 0,
                                top: 0,
                                pageX: 0,
                                pageY: 0,
                                zIndex: 1,
                                elemCenterPx: 0,
                                index: indeter,
                                worderker: true,
                                isSku: true
                            }
                        }

                    })

                })
            addFunData.push(addSkuData())
            // return 

        }
        return addFunData

    }
    const [skuTextList, setSkuTextList] = useState<any[]>(getDisplaySpecData())
    const [allMiterAstas, setAllMiterAstas] = useState<any>({
        select: true,
        befer: 'left',
        content: ''
    })
    const zhutuImageList: any = useAppSelector(state => state.jinritemaiCopyGoods.zhutuImageList)
    const [showImageKu, setShowImageKu] = useState(false)
    const [selectImages, setSelectImages] = useState<any[]>(zhutuImageList.map((res) => {
        // console.log('边框', res)
        return {
            select: false,
            url: process.env.PLASMO_PUBLIC_CN_OSS + res
        }
    }))
    const [seleCtcontenrIndex, setSeleCtcontenrIndex] = useState(-1)
    const [addImageberderLodin, setAddimageLodin] = useState(false)
    // useEffect(() => {
    //     // console.log('skuTextList', skuTextList)
    //     store.dispatch(setSkuTitleList(JSON.parse(JSON.stringify(skuTextList))))
    // }, [skuTextList])
    // useImperativeHandle(ref, () => {
    //     {
    //         skuTextList
    //     }
    // })
    useImperativeHandle(ref, () => ({
        skuTextList
    }));
    useEffect(() => {
        if (skuTextList.length === copynum) {
            return
        }
        const addConter = copynum - skuTextList.length
        if (addConter > 0) {
            for (let i = 0; i < addConter; i++) {
                skuTextList.push(addSkuData())
            }
        } else {
            skuTextList.splice(addConter, Math.abs(addConter))
        }
        setSkuTextList([...skuTextList])
    }, [copynum])
    const [addIfameStatus, setAddIfameStatus] = useState(false)
    const [setAddInfoData, setSetAddInfoData] = useState<any[]>([])
    return (
        <div className="lefterocnt" style={{
            marginLeft: 25,
        }}>
            {false && <div style={{ marginBottom: 15 }}>
                <Button
                    type="primary"
                    size="mini"
                    disabled={skuTextList.length >= copyGoodConfig.copynum}
                    onClick={() => {
                        skuTextList.push(getDisplaySpecData())
                        setSkuTextList([...skuTextList])
                    }}>
                    添加附加信息
                </Button>
            </div>}
            <div className="itemboxcone">
                <Space direction="vertical">
                    <div className="sye" style={{
                        color: '#000',
                        fontSize: 14,
                        fontWeight: 900,
                    }}>
                        批量调整
                    </div>
                    <Space>
                        {/* indeterminate={item.config.indeterminate}  */}
                        <Button size="mini" onClick={() => {
                            let shoukey = false
                            const assetAddInfoData = skuTextList.map((res: any, priindex) => {
                                // res.list = shuffleArray(res.list)
                                let conter: any = []
                                let filterData = res.list.filter((item, index) => {
                                    return index === 0
                                })
                                filterData.forEach((itewms: any, index) => {
                                    const addConter = itewms.values.map((iyter, iyuer) => {
                                        if (!iyter.picImga.url && !iyter.picImga.watermark.url) {
                                            shoukey = true
                                            return
                                        }
                                        return {
                                            url: iyter.picImga.url || iyter.picImga.watermark.url,
                                            index: iyuer,
                                            priindex
                                        }
                                    })
                                    conter.push(...addConter)
                                })
                                return conter
                                // return res.list.filter((item, index) => {
                                //     return index === 0
                                // }).map((itewms: any, index) => {
                                //     // itewms.index = index

                                //     return itewms.values.map((iyter, iyuer) => {
                                //         return {
                                //             url: iyter.picImga.url || iyter.picImga.watermark.url,
                                //             index: iyuer,
                                //             priindex
                                //         }
                                //     })
                                //     // return { url: itewms.values[0].picImga.url || itewms.values[0].picImga.watermark.url, index, priindex }
                                // })
                                // return res.list.map((itewms: any, index) => {
                                //     // itewms.index = index
                                //     return { url: itewms.values[0].picImga.url || itewms.values[0].picImga.watermark.url, index, priindex }
                                // })
                            })
                            if (shoukey) {
                                Modal.warning({
                                    title: '提示',
                                    content: '存在空图像无法操作， 请添加图片后选择',
                                })
                                return
                            }
                            console.log('setAddInfoData', assetAddInfoData)
                            setSetAddInfoData([...assetAddInfoData])
                            setAddIfameStatus(true)

                        }}>批量AI作图(全部sku图)</Button>
                        <Checkbox checked={allMiterAstas.select} onChange={(e) => {
                            allMiterAstas.select = e.target.checked
                            setAllMiterAstas({ ...allMiterAstas })
                            // const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))
                            // // console.log('skuTextListJSON', skuTextListJSON)
                            // skuTextListJSON[index].list.forEach((itemeter) => {
                            //     itemeter.values.forEach((itemer) => {
                            //         // console.log('itemer000', itemer)
                            //         if (!itemer.extra.measure_info && itemeter.name !== '鞋码大小' && itemeter.name !== '尺码大小' && itemeter.name !== '发货时效') {
                            //             itemer.isChecked = e.target.checked

                            //         }
                            //     })
                            // })
                            // skuTextListJSON[index].config.isChecked = e.target.checked
                            // skuTextListJSON[index].config.indeterminate = false
                            // setSkuTextList(skuTextListJSON)
                        }}>
                            全选
                        </Checkbox>
                        <Radio.Group value={allMiterAstas.befer} onChange={(e) => {
                            // const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))
                            allMiterAstas.befer = e.target.value
                            setAllMiterAstas({ ...allMiterAstas })
                            // setSkuTextList(skuTextListJSON)
                        }}>
                            <Radio value='left'>加在前</Radio>
                            <Radio value='right'>加在后</Radio>
                        </Radio.Group>
                        <Input placeholder="内容可用多个可用逗号、空格隔开一次添加多个" size="small" style={{
                            width: 300,
                        }}
                            // value={allMiterAstas.content}
                            onChange={(e: any) => {
                                allMiterAstas.content = e.target.value
                                // setAllMiterAstas({ ...allMiterAstas })
                                // const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))
                                // skuTextListJSON[index].config.addTep = e.target.value
                                // setSkuTextList(skuTextListJSON)
                            }} />
                        <Popover content={(
                            <Space direction="vertical" align="center">
                                <ImgDefault
                                    imgSrc={process.env.PLASMO_PUBLIC_CN_OSS + "funsaction/convert/addallcontent.png"}
                                    width="400px"
                                    height="500px"
                                    borderRadius={0}></ImgDefault>
                                内容可用多个可用逗号、空格隔开一次添加多个
                            </Space>
                        )}>
                            <Icon type="DoubtIcon"></Icon>
                        </Popover>
                        <Button type="primary" size="mini" onClick={(e) => {
                            const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))

                            if (!allMiterAstas.select) {
                                message.warning('未全选!!!')
                                return
                            }
                            // console.log('skuTextListJSON', skuTextListJSON)


                            if (!allMiterAstas.befer) {
                                message.warning('未选择添加位置!!!')
                                return
                            }
                            if (!allMiterAstas.content) {
                                message.warning('未输入内容!!!')
                                return
                            }

                            const getKon = allMiterAstas.content.split(/[\s,， ?]/) // .filter((item: any, index, self) => item && !isNaN(item * 1) && self.indexOf(item) === index && item.length === 19)

                            if (!getKon || !getKon.length) return message.warning('输入附加信息无效!!!')
                            console.log('getKon', getKon)
                            skuTextListJSON.forEach((item, index) => {
                                item.list.forEach((itemeter) => {
                                    itemeter.values.forEach((itemer) => {
                                        // console.log('itemer000', itemer)
                                        if (!itemer.extra.measure_info && itemeter.name !== '鞋码大小' && itemeter.name !== '尺码大小' && itemeter.name !== '发货时效') {
                                            itemer.isChecked = allMiterAstas.select
                                            itemer.direction = allMiterAstas.befer
                                        }
                                    })
                                })
                                item.config.isChecked = allMiterAstas.select
                                item.config.indeterminate = false
                            })
                            //  const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))
                            let celectLen = 0
                            skuTextListJSON.forEach((item) => {
                                item.list.forEach((conters) => {
                                    conters.values.forEach((item) => {
                                        if (item.isChecked) {
                                            celectLen++
                                        }
                                    })
                                })
                            })
                            // skuTextListJSON[index]
                            if (celectLen === 0) {
                                message.error('没有可用规格')
                                return
                            }
                            if (getKon.length === 1) {
                                // 只有一个 全部统一
                                skuTextListJSON.forEach((item) => {

                                    item.list.forEach((itemer, inmoter) => {
                                        itemer.values.forEach((itemer, inmoter) => {
                                            if (itemer.isChecked && !itemer.extra.measure_info && itemer.name !== '鞋码大小' && itemer.name !== '尺码大小' && itemer.name !== '发货时效') {
                                                itemer.addTep = getKon[0] || ''
                                            }
                                        })
                                    })
                                })

                            } else {
                                skuTextListJSON.forEach((item, index) => {
                                    item.list.forEach((itemer, inmoter) => {
                                        itemer.values.forEach((itemer, inmoter) => {
                                            if (itemer.isChecked && !itemer.extra.measure_info && itemer.name !== '鞋码大小' && itemer.name !== '尺码大小' && itemer.name !== '发货时效') {
                                                itemer.addTep = getKon[index] || ''
                                            }
                                        })
                                    })
                                })
                                // getKon.forEach((item, index) => {
                                //     skuTextListJSON[index] && skuTextListJSON[index].length & skuTextListJSON[index].list.forEach((itemer, inmoter) => {
                                //         itemer.values.forEach((itemer, inmoter) => {
                                //             if (itemer.isChecked && !itemer.extra.measure_info && itemer.name !== '鞋码大小' && itemer.name !== '尺码大小' && itemer.name !== '发货时效') {
                                //                 itemer.addTep = item
                                //             }
                                //         })
                                //     })
                                // })
                            }
                            setSkuTextList(skuTextListJSON)

                            // const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))
                            // let celectLen = 0
                            // skuTextListJSON[index].list.forEach((conters) => {
                            //     conters.values.forEach((item) => {
                            //         if (item.isChecked) {
                            //             celectLen++
                            //         }
                            //     })
                            // })
                            // if (celectLen === 0) {
                            //     message.error('请选择规格值')
                            //     return
                            // }
                            // skuTextListJSON[index].list.forEach((itemer, inmoter) => {
                            //     itemer.values.forEach((itemer, inmoter) => {
                            //         if (itemer.isChecked && !itemer.extra.measure_info && itemer.name !== '鞋码大小' && itemer.name !== '尺码大小' && itemer.name !== '发货时效') {
                            //             itemer.addTep = skuTextListJSON[index].config.addTep
                            //             itemer.direction = skuTextListJSON[index].config.direction
                            //         }
                            //     })
                            // })
                            // skuTextListJSON[index].config.addTep = ''
                            // skuTextListJSON[index].config.direction = 'left'
                            // setSkuTextList(skuTextListJSON)
                        }}>批量设置</Button>
                    </Space>
                    <Space>
                        <Button type="link" onClick={() => {
                            setSeleCtcontenrIndex(-2)
                            setShowImageKu(true)
                        }}>批量添加【sku图片】边框</Button>
                    </Space>
                </Space>
            </div>
            {skuTextList.map((item, index) => {
                return (
                    <div key={index} className="itemboxcone">
                        <Space direction="vertical">
                            <div className="itemboxcone_title">
                                <span>规格 {index + 1}</span>
                            </div>
                            <Space>
                                <Checkbox checked={item.config.isChecked} indeterminate={item.config.indeterminate} onChange={(e) => {
                                    const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))
                                    // console.log('skuTextListJSON', skuTextListJSON)
                                    skuTextListJSON[index].list.forEach((itemeter) => {
                                        itemeter.values.forEach((itemer) => {
                                            // console.log('itemer000', itemer)
                                            if (!itemer.extra.measure_info && itemeter.name !== '鞋码大小' && itemeter.name !== '尺码大小' && itemeter.name !== '发货时效') {
                                                itemer.isChecked = e.target.checked

                                            }
                                        })
                                    })
                                    skuTextListJSON[index].config.isChecked = e.target.checked
                                    skuTextListJSON[index].config.indeterminate = false
                                    setSkuTextList(skuTextListJSON)
                                }}>
                                    全选
                                </Checkbox>
                                <Radio.Group value={item.config.direction} onChange={(e) => {
                                    const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))
                                    skuTextListJSON[index].config.direction = e.target.value
                                    setSkuTextList(skuTextListJSON)
                                }}>
                                    <Radio value='left'>加在前</Radio>
                                    <Radio value='right'>加在后</Radio>
                                </Radio.Group>
                                <Input placeholder="请输入内容" size="small"
                                    // value={item.config.addTep}
                                    onChange={(e: any) => {
                                        // const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))
                                        skuTextList[index].config.addTep = e.target.value
                                        // setSkuTextList(skuTextListJSON)
                                    }} />
                                <Button type="primary" size="mini" onClick={(e) => {
                                    const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))
                                    let celectLen = 0
                                    skuTextListJSON[index].list.forEach((conters) => {
                                        conters.values.forEach((item) => {
                                            if (item.isChecked) {
                                                celectLen++
                                            }
                                        })
                                    })
                                    if (celectLen === 0) {
                                        message.error('请选择规格值')
                                        return
                                    }
                                    skuTextListJSON[index].list.forEach((itemer, inmoter) => {
                                        itemer.values.forEach((itemer, inmoter) => {
                                            if (itemer.isChecked && !itemer.extra.measure_info && itemer.name !== '鞋码大小' && itemer.name !== '尺码大小' && itemer.name !== '发货时效') {
                                                itemer.addTep = skuTextListJSON[index].config.addTep
                                                itemer.direction = skuTextListJSON[index].config.direction
                                            }
                                        })
                                    })
                                    skuTextListJSON[index].config.addTep = ''
                                    skuTextListJSON[index].config.direction = 'left'
                                    setSkuTextList(skuTextListJSON)
                                }}>批量设置</Button>
                            </Space>
                            {item.list.map((iyter, niyerindex) => {
                                return (
                                    <div key={niyerindex}>
                                        <Space direction="vertical">
                                            <Space>
                                                <span className="namher">
                                                    <Tag bordered transparentBg type="default">
                                                        {iyter.name}
                                                    </Tag>
                                                </span>
                                                {!(!iyter.values[0].extra.measure_info && iyter.name !== '鞋码大小' && iyter.name !== '尺码大小' && iyter.name !== '发货时效') &&
                                                    <span className="noter" style={{
                                                        marginLeft: 10,
                                                        color: '#f5222d',
                                                        fontSize: 12,
                                                        display: 'inline-block',
                                                        verticalAlign: 'middle',
                                                        // lineHeight: 1.5,
                                                    }}>
                                                        该规格不支持裂变自定义
                                                    </span>}

                                            </Space>
                                            {iyter.values.map((skuStart, inmoter) => {
                                                return (
                                                    <Space direction="vertical" key={skuStart.id}>
                                                        <Space>
                                                            <Checkbox
                                                                checked={skuStart.isChecked}
                                                                disabled={!(!iyter.values[0].extra.measure_info && iyter.name !== '鞋码大小' && iyter.name !== '尺码大小' && iyter.name !== '发货时效')}
                                                                onChange={(e) => {
                                                                    console.log(e.target.checked)
                                                                    const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))
                                                                    skuTextListJSON[index].list[niyerindex].values[inmoter].isChecked = e.target.checked
                                                                    // const getyesconter = skuTextListJSON[index][niyerindex].values.filter(re => {
                                                                    //     return re.isChecked
                                                                    // })
                                                                    let getyesconter = 0
                                                                    skuTextListJSON[index].list.forEach(erser => {
                                                                        erser.values.forEach(jh => {
                                                                            if (jh.isChecked) getyesconter++
                                                                        })
                                                                    })

                                                                    let valter = 0
                                                                    skuTextListJSON[index].list.forEach((dfkt, index) => {
                                                                        valter += dfkt.values.length
                                                                        // iyter.values.forEach((inmoter, inmoterindex) => {
                                                                        //     valter++
                                                                        // })
                                                                    })
                                                                    if (getyesconter === valter) {
                                                                        skuTextListJSON[index].config.isChecked = true
                                                                        skuTextListJSON[index].config.indeterminate = false
                                                                    } else if (getyesconter > 0) {
                                                                        skuTextListJSON[index].config.isChecked = false
                                                                        skuTextListJSON[index].config.indeterminate = true
                                                                    }
                                                                    setSkuTextList(skuTextListJSON)
                                                                }} />
                                                            <div className="niher">
                                                                <Tag bordered transparentBg type="success">
                                                                    {skuStart.name}
                                                                </Tag>
                                                            </div>
                                                            <Radio.Group
                                                                disabled={!(!iyter.values[0].extra.measure_info && iyter.name !== '鞋码大小' && iyter.name !== '尺码大小' && iyter.name !== '发货时效')}
                                                                value={skuStart.direction}
                                                                onChange={(e) => {
                                                                    const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))
                                                                    skuTextListJSON[index].list[niyerindex].values[inmoter].direction = e.target.value
                                                                    setSkuTextList(skuTextListJSON)
                                                                }}>
                                                                <Radio value='left'>加在前</Radio>
                                                                <Radio value='right'>加在后</Radio>
                                                            </Radio.Group>
                                                            <Input
                                                                placeholder="请输入内容"
                                                                size="small"
                                                                value={skuStart.addTep}
                                                                disabled={!(!iyter.values[0].extra.measure_info && iyter.name !== '鞋码大小' && iyter.name !== '尺码大小' && iyter.name !== '发货时效')}
                                                                onChange={(e: any) => {
                                                                    const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))
                                                                    skuTextListJSON[index].list[niyerindex].values[inmoter].addTep = e.target.value
                                                                    setSkuTextList(skuTextListJSON)
                                                                }} />
                                                            {skuStart.addTep && <div className="outerboter">
                                                                <Tag bordered transparentBg type="success">
                                                                    {
                                                                        skuStart.direction === 'left' ? `${skuStart.addTep}${skuStart.name}` : `${skuStart.name}${skuStart.addTep}`
                                                                    }
                                                                </Tag>

                                                            </div>}
                                                        </Space>
                                                        {niyerindex === 0 && <MoveImageBpx imageData={skuStart.picImga} picImages={iyter} setMoterIndex={index} itemingdex={niyerindex} setimageData={(data) => {
                                                            // console.log('niyerindex', niyerindex, inmoter)
                                                            const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))
                                                            skuTextListJSON[index].list[0].values[inmoter].picImga = data
                                                            setSkuTextList(skuTextListJSON)
                                                        }} />}
                                                    </Space>
                                                )
                                            })}
                                            {niyerindex === 0 &&
                                                <div>
                                                    <Space align="baseline">
                                                        <Button onClick={() => {
                                                            let onter: any = []
                                                            let shoukey = false
                                                            iyter.values.forEach((reyer, indeter) => {
                                                                if (!reyer.picImga.url && !reyer.picImga.watermark.url) {
                                                                    shoukey = true
                                                                    return
                                                                }
                                                                onter.push(
                                                                    {
                                                                        url: reyer.picImga.url || reyer.picImga.watermark.url,
                                                                        index: indeter,
                                                                        priindex: index,
                                                                    }
                                                                )
                                                            })
                                                            if (shoukey) {
                                                                Modal.warning({
                                                                    title: '提示',
                                                                    content: '存在空图像无法操作， 请添加图片后选择',
                                                                })
                                                                return
                                                            }
                                                            setSetAddInfoData([[...onter]])
                                                            setAddIfameStatus(true)

                                                        }}>AI作图</Button>
                                                        <Upload
                                                            btnText={`上传${iyter.config.selectType === 1 ? '图标' : '边框'}`}
                                                            btnType="default"
                                                            btnIcon={<AddIcon />}
                                                            maxCount={1}
                                                            showUploadList={false}
                                                            beforeUpload={(file) => {
                                                                const fileType = /\image\/\/*/
                                                                if (fileType.test(file.type)) {
                                                                    const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))
                                                                    const addliter = skuTextListJSON[index].list[niyerindex].values

                                                                    const imageUrl = getObjectURL(file)
                                                                    var img: any = new Image()
                                                                    img.src = imageUrl
                                                                    img.addEventListener("load", () => {
                                                                        const iw = img.width
                                                                        const ih = img.height
                                                                        const bi = ih / iw
                                                                        console.log('iyter.values', iyter.values)

                                                                        addliter.forEach((picItem) => {
                                                                            console.log('picItem', picItem)
                                                                            picItem.picImga.watermark.url = imageUrl
                                                                            picItem.picImga.watermark.bi = bi
                                                                            picItem.picImga.watermark.height = iyter.config.selectType === 1 ? Math.round(bi * picItem.picImga.watermark.width) : 100
                                                                        })
                                                                        setSkuTextList(skuTextListJSON)
                                                                        // setPicImageList([...picImageList])
                                                                    })
                                                                    return
                                                                }
                                                                message.error("仅支持图片")
                                                            }}
                                                        />
                                                        <Button
                                                            type="link"
                                                            onClick={() => {
                                                                const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))
                                                                const addliter = skuTextListJSON[index].list[niyerindex].values
                                                                addliter.forEach((item) => {
                                                                    const infodater = getMoveItemInfo(
                                                                        iyter.config.selectType,
                                                                        item.picImga.watermark.bi
                                                                    )
                                                                    const mergewet = Object.assign(item.picImga.watermark, infodater)
                                                                    item.picImga.watermark = mergewet
                                                                })
                                                                setSkuTextList(skuTextListJSON)

                                                                // setPicImageList([...picImageList])
                                                            }}>
                                                            恢复默认
                                                        </Button>
                                                        <Button
                                                            type="link"
                                                            onClick={() => {
                                                                const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))
                                                                const addliter = skuTextListJSON[index].list[niyerindex].values
                                                                addliter.forEach((picItem) => {
                                                                    picItem.picImga.watermark.url = null
                                                                    picItem.picImga.watermark.bi = 0
                                                                    picItem.picImga.watermark.height = 0
                                                                })
                                                                // setPicImageList([...picImageList])
                                                                setSkuTextList(skuTextListJSON)

                                                            }}>
                                                            清除所有{iyter.config.selectType === 1 ? '图标' : '边框'}
                                                        </Button>
                                                        {iyter.config.selectType === 2 &&
                                                            <Button type="link"
                                                                onClick={() => {
                                                                    setSeleCtcontenrIndex(index)
                                                                    // getMateriallistAdmin({
                                                                    //   type: 1,
                                                                    //   page: 1,
                                                                    //   pageSize: 20
                                                                    // }).then((res) => {
                                                                    //   console.log('res边框', res)
                                                                    // })
                                                                    return setShowImageKu(true)
                                                                }}
                                                            >
                                                                {iyter.config.selectType === 1 ? '图标' : '边框'}库
                                                            </Button>
                                                        }
                                                    </Space>
                                                </div>
                                            }
                                        </Space>
                                    </div>
                                )
                            })}
                        </Space>

                        {false && <div className="deletcontenty">
                            <Icon
                                type="DeleteIcon"
                                onClick={() => {
                                    if (skuTextList.length === 1) {
                                        message.warning('至少保留一个规格')
                                        return
                                    }
                                    skuTextList.splice(index, 1)
                                    setSkuTextList([...skuTextList])
                                }}></Icon>
                        </div>}
                    </div>)
            })}
            <Modal
                width={675}
                visible={showImageKu}
                title={`选择边框 ${seleCtcontenrIndex === -2 ? `(${selectImages.filter(item => item.select).length}/${copynum}) ${selectImages.filter(item => item.select).length >= copynum ? '(已选完)' : ''}` : ''}`}
                okText=" 确定"
                cancelText=" 取消"
                onCancel={() => {
                    selectImages.forEach((item) => {
                        item.select = false
                    })
                    setSelectImages([...selectImages])
                    setShowImageKu(false)
                    setAddimageLodin(false)
                }}
                onOk={() => {
                    const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))

                    if (seleCtcontenrIndex !== -2) {
                        const isSelectImageItem = selectImages.find(si => si.select)
                        // const imageUrl = getObjectURL(file)
                        var img: any = new Image()
                        img.src = isSelectImageItem.url
                        // const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))
                        // const addliter = skuTextListJSON[seleCtcontenrIndex].list[niyerindex].values
                        // console.log('seleCtcontenrIndex', seleCtcontenrIndex)
                        img.addEventListener("load", () => {
                            const iw = img.width
                            const ih = img.height
                            const bi = ih / iw
                            console.log(' skuTextListJSON[seleCtcontenrIndex]', skuTextListJSON[seleCtcontenrIndex])
                            skuTextListJSON[seleCtcontenrIndex].list[0].values.forEach((picItem) => {
                                console.log('picItem', picItem)
                                picItem.picImga.watermark.url = isSelectImageItem.url
                                picItem.picImga.watermark.bi = bi
                                picItem.picImga.watermark.height = skuTextListJSON[seleCtcontenrIndex].config.selectType === 1 ? Math.round(bi * picItem.picImga.watermark.width) : 100
                            })
                            setSkuTextList(skuTextListJSON)
                            setAddimageLodin(false)
                        })
                        setShowImageKu(false)
                        // selectImages.forEach((item) => {
                        //     item.select = false
                        // })
                        setSelectImages([...selectImages])
                        return
                    }
                    setAddimageLodin(true)

                    const selectIImages = selectImages.filter(item => item.select)
                    let cbIndex = 0
                    addImgaesar(selectIImages, () => {
                        console.log('skuTextListJSON', skuTextListJSON)
                        setSkuTextList(skuTextListJSON)

                        setShowImageKu(false)
                        selectImages.forEach((item) => {
                            item.select = false
                        })
                        setAddimageLodin(false)
                        setSelectImages([...selectImages])
                    })
                    function addImgaesar(selectItem, cb) {
                        if (!selectItem.length) {
                            return cb && cb()
                        }
                        const aselectier = selectItem.splice(0, 1)
                        var img: any = new Image()
                        img.src = aselectier[0].url
                        img.addEventListener("load", () => {
                            const iw = img.width
                            const ih = img.height
                            const bi = ih / iw
                            skuTextListJSON[cbIndex].config.selectType = 2
                            skuTextListJSON[cbIndex].list[0].values.forEach((picItem) => {
                                const typeConter = getMoveItemInfo(2, bi)
                                const touWers = Object.assign(picItem.picImga.watermark, typeConter)
                                picItem.picImga.watermark = touWers
                                picItem.picImga.watermark.url = aselectier[0].url
                                picItem.picImga.watermark.bi = bi
                                picItem.picImga.watermark.height = skuTextListJSON[cbIndex].config.selectType === 1 ? Math.round(bi * picItem.picImga.watermark.width) : 100
                            })
                            cbIndex++
                            addImgaesar(selectItem, cb)
                        })
                    }



                }}
            >
                <Spin spinning={addImageberderLodin}>

                    <div className="selectListerimgae">
                        {selectImages.map((res: any, index: number) => {
                            return (
                                <div className="contr" key={index}>
                                    <img
                                        className="imageconer"
                                        src={res.url}
                                        alt={res.url}
                                        onClick={() => {
                                            if (seleCtcontenrIndex !== -2) {
                                                selectImages.forEach((item) => {
                                                    item.select = false
                                                })
                                                res.select = true
                                                setSelectImages([...selectImages])
                                                return
                                            }
                                            const selectLength = selectImages.filter(item => item.select).length
                                            // console.log('slectall', seleCtcontenrIndex, copynum)
                                            if (res.select) {
                                                res.select = false
                                                setSelectImages([...selectImages])
                                                return
                                            }
                                            if (selectLength < copynum) {
                                                res.select = true
                                                setSelectImages([...selectImages])
                                                return
                                            }
                                            message.warning('最多选择' + copynum + '张图片')
                                        }}

                                    />
                                    {res.select && <FinishIcon className="selectImage" />}
                                </div>
                            )
                        })}
                    </div>
                </Spin>

            </Modal>
            <AiOpenImageComp
                visible={addIfameStatus}
                onCancel={() => setAddIfameStatus(false)}
                type='4'
                setAddInfoData={setAddInfoData}
                product_id={goodsDetellData.product_id}
                img_format={1}
                onChangeImage={(data) => {
                    console.log('data123465', data)
                    const skuTextListJSON = JSON.parse(JSON.stringify(skuTextList))

                    data.forEach((item, index) => {
                        item.forEach((iyee, its) => {
                            if (iyee.res_url) {
                                // console.log('123465', iyee.res_url)
                                // console.log('12346500**--+', skuTextListJSON[iyee.priindex].list[0].values[iyee.index].picImga.url)
                                // skuTextList[index].list[niyerindex].values
                                try {
                                    // skuTextListJSON[index].list[0].values[inmoter].picImga = data
                                    skuTextListJSON[iyee.priindex].list[0].values[iyee.index].picImga.url = iyee.res_url
                                    // console.log('skuTextList[iyee.priindex].list[iyee.index]', skuTextListJSON)

                                    // setSkuTextList(skuTextListJSON)

                                } catch (error) {
                                    console.log('设置图片错误', error)
                                }
                            }
                        })
                    })
                    setSkuTextList([...skuTextListJSON])
                    setAddIfameStatus(false)
                }}
            ></AiOpenImageComp>
        </div>
    )
}



export default forwardRef(SkuTitleInfoData)